<template>
    <div class="main-wrapper">

        <!--布局-->
        <el-container>
            <!--左导航-->
            <el-aside width="200px">
                <!--Logo部分-->
                <div class="aside-logo-wrapper">
                    <!--@标识src下-->
                    <img src="../../assets/logo.png" alt="">
                    <span>Crm管理后台系统</span>
                </div>
                <!--导航菜单-->
                <el-scrollbar>
                    <el-menu
                            :unique-opened="true"
                            :router="true"
                            active-text-color="#F56C6C"
                            text-color="#606266"
                            default-active="1">
                        <!--导航头-->
                        <el-menu-item index="1">
                            <i class="el-icon-menu"></i>
                            <span slot="title">系统首页</span>
                        </el-menu-item>

                        <!--商品相关-->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>商品管理</span>
                            </template>
                            <el-menu-item index="2-1" route="/productquery">
                                <i class="el-icon-menu"></i>
<!--                                <router-link to="/productquery">产品查询</router-link>-->
                                产品查询
                            </el-menu-item>
                            <el-menu-item index="2-2" route="/goodsmanage">
                                <i class="el-icon-menu"></i>
<!--                                <router-link to="/goodsmanage">商品管理</router-link>-->
                                商品管理
                            </el-menu-item>

                            <el-menu-item index="2-3" route="/goodbrand">
                                <i class="el-icon-menu"></i>
                                <span slot="title">商品品牌管理</span>
                            </el-menu-item>
                            <el-menu-item index="2-4" route="/goodtype">
                                <i class="el-icon-menu"></i>
                                <span slot="title">商品类型管理</span>
                            </el-menu-item>
                            <el-menu-item index="2-5" route="/supplier">
                                <i class="el-icon-menu"></i>
                                <span slot="title">供应商管理</span>
                            </el-menu-item>
                            <el-menu-item index="2-6" route="/priceadjust">
                                <i class="el-icon-menu"></i>
                                <span slot="title">价格调整管理</span>
                            </el-menu-item>
                            <el-menu-item index="2-7">
                                <i class="el-icon-menu"></i>
                                <span slot="title">价格调整审核</span>
                            </el-menu-item>
                        </el-submenu>

                        <!--售后管理-->
                        <!--B2C销售管理-->
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>B2C销售管理</span>
                            </template>
                            <el-menu-item index="5-1" route="/sellOrderManage">
                                <i class="el-icon-menu"></i>
                                <span slot="title">B2C销售订单查询</span>
                            </el-menu-item>
                            <el-menu-item index="5-2" route="/sellOutRepository">
                                <i class="el-icon-menu"></i>
                                <span slot="title">B2C销售出库管理</span>
                            </el-menu-item>
                            <el-menu-item index="5-3" route="/sellReturnOrder">
                                <i class="el-icon-menu"></i>
                                <span slot="title">B2C销售退货管理</span>
                            </el-menu-item>
                            <el-menu-item index="5-4" route="/sellOutRepositoryRecord">
                                <i class="el-icon-menu"></i>
                                <span slot="title">B2C销售出库单记录</span>
                            </el-menu-item>
                            <el-menu-item index="5-5" route="sellReturnOrderRecord">
                                <i class="el-icon-menu"></i>
                                <span slot="title">B2C销售退货单记录</span>
                            </el-menu-item>
                        </el-submenu>

                        <!--员工相关-->
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>售后管理</span>
                            </template>
                            <el-submenu index="3-1">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>返厂出入库管理</span>
                                </template>
                                <el-menu-item index="3-1-1" route="/refacoutman">
                                    <span slot="title">返厂出库管理</span>
                                </el-menu-item>
                                <el-menu-item index="3-1-2" route="/outApplyApprove">
                                    <span slot="title">返厂出库单审核</span>
                                </el-menu-item>
                                <el-menu-item index="3-1-3" route="/refacinman">
                                    <span slot="title">返厂入库管理</span>
                                </el-menu-item>
                                <el-menu-item index="3-1-4" route="/inApplyApprove">
                                    <span slot="title">返厂入库单审核</span>
                                </el-menu-item>
                                <el-menu-item index="3-1-5" route="/repair">
                                    <span slot="title">维修点管理</span>
                                </el-menu-item>
                            </el-submenu>
                            <el-submenu index="3-2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                   <span>退换货申请管理</span>
                                </template>
                                <el-menu-item index="3-2-1" route="/b2cApply">
                                    <span slot="title">B2C退换货申请管理</span>
                                </el-menu-item>
                                <el-menu-item index="3-2-2" route="/b2cApplyApproval">
                                    <span slot="title">B2C退换货审批</span>
                                </el-menu-item>
                                <el-menu-item index="3-2-3" route="/b2cApplyComplaint">
                                    <span slot="title">B2C退换货申诉记录</span>
                                </el-menu-item>
                            </el-submenu>
                        </el-submenu>

                        <!--库存管理-->
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>库存管理</span>
                            </template>
                            <el-submenu index="4-1">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>出库管理</span>
                                </template>
                                <el-menu-item index="4-1-1" route="/repOutAfterSale">
                                    <span slot="title">售后出库</span>
                                </el-menu-item>
                            </el-submenu>
                            <el-submenu index="4-2">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>入库管理</span>
                                </template>
                                <el-menu-item index="4-2-1" route="/repInAfterSale">
                                    <span slot="title">售后入库</span>
                                </el-menu-item>
                            </el-submenu>
                            <el-submenu index="4-3">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>出入库审核</span>
                                </template>
                                <el-menu-item index="4-3-1" route="/repoOutApprove">
                                    <span slot="title">出库审核</span>
                                </el-menu-item>
                            </el-submenu>
                        </el-submenu>

                        <!--商品相关-->
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>赠品相关</span>
                            </template>
                            <el-menu-item index="6-1" route="/giftInfo">
                                <i class="el-icon-menu"></i>
                                <!--                                <router-link :to="'/giftInfo'">-->
                                赠品管理
                                <!--                                </router-link>-->

                            </el-menu-item>
                            <el-menu-item index="6-2" route="/giftToGood">
                                <i class="el-icon-menu"></i>
                                <!--                                <router-link :to="'/giftToGood'">-->
                                赠品转商品管理
                                <!--                                </router-link>-->
                            </el-menu-item>
                            <el-menu-item index="6-3" route="/giftToGoodCheck">
                                <i class="el-icon-menu"></i>
                                <span slot="title">赠品转商品审核</span>
                            </el-menu-item>
                            <el-menu-item index="6-4"   route="/goodToGift">
                                <i class="el-icon-menu"></i>
                                <span slot="title">商品转赠品管理</span>
                            </el-menu-item>
                            <el-menu-item index="6-5" route="/goodToGiftCheck">
                                <i class="el-icon-menu"></i>
                                <span slot="title">商品转赠品审核</span>
                            </el-menu-item>
                            <el-menu-item index="6-6" route="/giftBind">
                                <i class="el-icon-menu"></i>
                                <span slot="title">赠品捆绑管理</span>
                            </el-menu-item>
                            <el-menu-item index="6-7">
                                <i class="el-icon-menu"></i>
                                <span slot="title">赠品捆绑信息审核</span>
                            </el-menu-item>
                        </el-submenu>

                        <!--活动管理-->
                        <el-submenu index="7">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>活动管理</span>
                            </template>

                            <el-menu-item index="/Promotion">
                                <i class="el-icon-s-ticket"></i>
                                <span slot="title">促销活动管理</span>
                            </el-menu-item>
                            <el-menu-item index="/Promotion">
                                <i class="el-icon-document-checked"></i>
                                <span slot="title">促销活动审核</span>
                            </el-menu-item>
                            <el-menu-item index="/Marketing">
                                <i class="el-icon-shopping-cart-full"></i>
                                <span slot="title">市场活动管理</span>
                            </el-menu-item>
                            <el-menu-item index="/Marketing">
                                <i class="el-icon-document-checked"></i>
                                <span slot="title">市场活动审核</span>
                            </el-menu-item>
                            <el-menu-item index="/Returned">
                                <i class="el-icon-s-order"></i>
                                <span slot="title">赠品退货管理</span>
                            </el-menu-item>
                            <el-menu-item index="/ReturnedAudit">
                                <i class="el-icon-document-checked"></i>
                                <span slot="title">赠品退货审核</span>
                            </el-menu-item>
                        </el-submenu>

                    </el-menu>
                </el-scrollbar>

            </el-aside>
            <!--右导航-->
            <el-container>
                <!--右导航头-->
                <el-header>右导航==========</el-header>
                <!--右主题内容-->
                <el-main>
                    <!--动态渲染-->
                    <div class="main-box">
                        <!--展示不同的页面  品牌crud页面 ，分类的crud页面 ，admin crud单页面-->
                        <router-view/>
                    </div>

                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped lang="scss">
    .router-link-active { //点击时去掉下划线
        text-decoration: none;
    }

    a {
        text-decoration: none; //去掉原有链接文字下划线
    }

    .main-wrapper {
        height: 100%;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #fff;
        color: #333;


        .aside-logo-wrapper {
            text-align: center;
            background-color: #B3C0D1;
            height: 60px;
            line-height: 60px;

            img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                vertical-align: middle;
                margin-right: 8px;
            }

            span {
                font-weight: 700;
                color: #fff;
                font-family: "华文行楷";
            }
        }
    }

    .el-scrollbar {
        height: calc(100% - 60px);
    }

    .el-main {
        background-color: #E9EEF3;
        color: #606266;
        padding: 6px 0 0 6px;

        .main-box {
            width: 100%;
            height: 100%;
            background-color: #fff;
            padding: 15px 0px 0px 15px;
            box-sizing: border-box;
        }
    }

    .el-container {
        height: 100%;
    }
</style>